@import shared.Pojo.VarInfoDataKind
@import shared.Pojo.BiomDataKind
@()(implicit request: RequestHeader, messages: Messages)
<div class="tab-pane  " id="group">

	<div id="fileIntro" style="color: #666;
		display: none">

		<div class="row" style="margin-left: 0px;
			margin-right: 0px;
			margin-top: 10px">

			<div class="col-sm-12" style="padding-left: 10px">
				<ul style="">
					<li>@messages("matrixFileFormat")</li>
					<li>@messages("groupFileInfo")</li>
				</ul>
				<p>
					@messages("examplesAreAsShownBelow")
					：<a href="@routes.DataController.downloadExampleData?fileName=group.txt" ><span class="fa fa-download">
				</span></a>
					<br>
					<img style="margin-top: 5px" src="@routes.Assets.at("images/groupFileIntro.jpg")" >

				</p>
			</div>

		</div>

	</div>

	<div class="table-responsive">

		<div >
			<button type="button" class="btn btn-primary idsButton" disabled >
				<i class="fa fa-trash"></i>&nbsp;@messages("delete")
			</button>
			<button type="button" class="btn btn-primary" id="deleteButton" onclick="DataManage.addShow">
				<i class="fa fa-cloud-upload"></i>&nbsp;@messages("upload")
			</button>
		</div>

		<div style="display: none;
			margin-bottom: 10px">@{
			messages("filteringAndSort")
		}：
			<span id="filterCondition">

				<span class="eachFilterCondition" style="display: none">
					<span >Gene ID</span>
					<span style="color: red">LIKE</span>
					AT
					<sup style="" class="mySup" onclick="SampleManage.removeCondition">
						<i class="fa fa-times-circle"></i>
					</sup>
				</span>

			</span>
		</div>

		<div style="display: none;
			margin-bottom: 10px">@{
			messages("sortingConditions")
		}：
			<span id="sortCondition">

				<span class="eachFilterCondition" style="display: block">
					<span >Gene ID ,</span>
					<span style="color: red">@messages("ascending")</span>
					<sup style="" class="mySup" onclick="SampleManage.removeCondition">
						<i class="fa fa-times-circle"></i>
					</sup>
				</span>

			</span>
		</div>

		<table class="display table table-bordered" id="table" data-pagination="true"
		data-page-list="[10, 25, 50, 100, all]" >
			<thead>

				<tr class="myTr">

				</tr>

			</thead>
		</table>

		<div id="allFilterContent">

		</div>

		<div id="addModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog" style="width: 1000px">
				<div class="modal-content">
					<div class="modal-header bg-primary">
						<h4 class="modal-title">
							<i class="fa fa-cloud-upload"></i>
							<span id="lblAddTitle" style="font-weight: bold">@messages("upload")</span>
						</h4>
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true" >
							<i class="fa fa-remove"></i>
						</button>
					</div>
					<form class="form-horizontal" id="form" action="" data-toggle="validator" enctype="multipart/form-data">
						<div class="modal-body">
							<div class="row-fluid">

								<div class="form-group">
									<label class="control-label col-sm-3">@messages("groupFile"):</label>
									<div class="col-sm-6">
										<ul class="nav nav-tabs" id="inputKind">

											<li class="active" >
												<a href="#groupHand" data-toggle="tab" >
												@messages("UsingTheSampleFile") </a>
											</li>

											<li class="">
												<a href="#groupFile" data-toggle="tab" >
												@messages("file") </a>
											</li>

										</ul>
										<div class="tab-content" style="margin-top: 20px">

											<div class="tab-pane fade in active" id="groupHand">

												<textarea class="form-control monospace myGroupFileContent" name="fileContent" rows="8"
												style="word-wrap: normal;
													overflow-x: auto;
													white-space: pre;" readonly></textarea>

												<div style="margin-top: 5px">
													<p>@messages("defaultFileNameInfo", "group.txt")</p>
													<p>@messages("note2Info", "group_1.txt")</p>
												</div>

											</div>

											<div class="tab-pane " id="groupFile">

												<input type="file" class="file control-label myGroupFile" name="file"
												data-show-preview="false" accept=".csv,.xlsx,.txt"
												data-show-upload="false" >
												<span class="help-block">
													<a href="#" class="myFileIntroShow"><em>
													@messages("FileFormatDescription")</em></a>
												</span>

												<div style="">
													<p>@messages("firstLineInfo")</p>
													<p>@messages("repeatNameInfo", "group_1.txt")</p>
												</div>

											</div>

										</div>
									</div>
								</div>

								<div id="headers" >

								</div>

								<div class="form-group">
									<label class="control-label col-sm-3">@messages("tag"):</label>
									<div class="col-sm-6">
										<div class="tag">

										</div>

									</div>
								</div>

								<div class="form-group">
									<label class="control-label col-sm-3">@messages("comment"):</label>
									<div class="col-sm-6">
										<textarea class="form-control" name="comment" rows="2"></textarea>
									</div>
								</div>

							</div>
						</div>

						<div class="modal-footer bg-info">
							<input type="hidden" id="ID" name="ID" />
							<button type="button" class="btn blue myAdd" >
							@messages("confirm")</button>
							<button type="button" class="btn green" data-dismiss="modal">
							@messages("cancel")</button>
						</div>
					</form>

				</div>
			</div>
		</div>


	</div>

	<div id="updateModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="width: 800px">
			<div class="modal-content">
				<div class="modal-header bg-primary">
					<h4 class="modal-title">
						<i class="fa fa-edit"></i>
						<span id="lblAddTitle" style="font-weight: bold">@messages("modify")</span>
					</h4>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true" >
						<i class="fa fa-remove"></i>
					</button>
				</div>
				<form class="form-horizontal" id="updateForm" action="" data-toggle="validator">
					<div class="modal-body">
						<div class="row-fluid">

							<input hidden name="id" class="fillByName">
							<input hidden name="kind" class="fillByName">
							<input hidden name="originalFileName">

							<div class="form-group">
								<label class="control-label col-sm-3">@messages("fileName"):</label>
								<div class="col-sm-6">
									<div class="input-group">
										<input class="form-control fillByName" name="fileName" />
										<span class="input-group-addon">.txt</span>
									</div>
								</div>
							</div>

							<div class="form-group">
								<label class="control-label col-sm-3">@messages("tag"):</label>
								<div class="col-sm-6">
									<div class="tag">

									</div>

								</div>
							</div>

							<div class="form-group">
								<label class="control-label col-sm-3">@messages("comment"):</label>
								<div class="col-sm-6">
									<textarea class="form-control fillByName" name="comment" rows="2"></textarea>
								</div>
							</div>


						</div>
					</div>
					<div class="modal-footer bg-info">
						<input type="hidden" id="id" name="id" />
						<button type="button" class="btn blue myUpdate">
						@messages("confirm")</button>
						<button type="button" class="btn green" data-dismiss="modal">
						@messages("cancel")</button>
					</div>
				</form>
			</div>
		</div>
	</div>

	<div id="exchangeModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

		<div class="modal-dialog" style="width: 800px">
			<div class="modal-content">
				<div class="modal-header bg-primary">
					<h4 class="modal-title">
						<i class="fa fa-exchange"></i>
						<span id="lblAddTitle" style="font-weight: bold">@messages("editColumn")</span>
					</h4>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true" >
						<i class="fa fa-remove"></i>
					</button>
				</div>
				<form class="form-horizontal" id="form" action="" data-toggle="validator">
					<div class="modal-body">
						<div class="row-fluid">

							<input hidden name="id" class="fillByName">

							<div id="headers" >

								<div class="form-group" >
									<label class="control-label col-sm-3">@messages("sampleName"):</label>
									<div class="col-sm-2">
										<select class="form-control fillByNameAndTrigger myHeader" name="sampleHeader" >
										</select>
									</div>
									<label class="control-label col-sm-2">@messages("group"):</label>
									<div class="col-sm-2">
										<select class="form-control fillByNameAndTrigger myHeader" name="classNoteHeader" >
										</select>
									</div>
								</div>

								<div class="form-group">
									<label class="control-label col-sm-3">@messages("pairingID"):</label>
									<div class="col-sm-2">
										<select class="form-control fillByNameAndTrigger myHeader" name="pairHeader" >
										</select>
									</div>
								</div>

							</div>

						</div>
					</div>
					<div class="modal-footer bg-info">
						<button type="button" class="btn blue myExchange">
						@messages("confirm")</button>
						<button type="button" class="btn green" data-dismiss="modal">
						@messages("cancel")</button>
					</div>
				</form>
			</div>
		</div>
	</div>

</div>
